

.x-clear { clear: both; }
.x-invisible { visibiliy: hidden !important; }
.x-hidden { display: none !important; }

.x-editable {
	-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none;
}
.x-editable-on { }
.x-editable-on:not(.x-editable-empty):not(.x-editable-file):not(.x-editable-gallery):not(.x-editable-draggable):hover {
	background: url('../images/editable-back.png') repeat;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
.x-editable-empty:hover {
	/*background: none;*/
}
	.x-editable-placeholder {
		display: inline;
		padding: 0 7px;
		background: url('../images/editable-back.png') repeat;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		font-style: italic;
	}

.x-editing {	/* class is added to the element when it is being edited by user */
	outline-color: #FFFFB7 !important;
	outline-style: solid !important;
	outline-width: 3px !important;
	outline-offset: 2px !important;
	-moz-outline-radius: 5px !important;
	-webkit-outline-radius: 5px !important;
	
	/*border: 1px solid #ccc !important;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;*/
}


.x-icon {
	display: inline-block;
	width: 16px;
	height: 16px;

	overflow: hidden;
	
	background-repeat: no-repeat;
	background-image: url(/images/icons.png);
}

.x-icon-1 { background-position: 0 0; }
.x-icon-1:hover { background-position: 0 -20px; }
.x-icon-2 { background-position: -20px 0; }
.x-icon-2:hover { background-position: -20px -20px; }
.x-icon-3 { background-position: -40px 0; }
.x-icon-3:hover { background-position: -40px -20px; }
.x-icon-4 { background-position: -60px 0; }
.x-icon-4:hover { background-position: -60px -20px; }
.x-icon-5 { background-position: -80px 0; }
.x-icon-5:hover { background-position: -80px -20px; }
.x-icon-6 { background-position: -100px 0; }
.x-icon-6:hover { background-position: -100px -20px; }
.x-icon-7 { background-position: -120px 0; }
.x-icon-7:hover { background-position: -120px -20px; }
.x-icon-8 { background-position: -140px 0; }
.x-icon-8:hover { background-position: -140px -20px; }

/* ----------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------- */
/* ---   EDITORS   ------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------- */


.x-editable-number {
	cursor: url(/images/cursor-pointer-slide.gif) 14 9, grab;
}
.x-editable-number-helper {
	width: 10px;
	height: 10px;
	cursor: url(/images/cursor-pointer-slide.gif) 14 9, grabbing;
	background-color: #0099FF;
	opacity: 0;
}

.x-editable-onoff {
	cursor: pointer;
}
.x-editable-select { cursor: pointer; }
.x-editable-select:after { content: " v "; }
.x-editable-select-popup {
	position: absolute;
	padding: 4px 8px;
	background-color: #191919;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	color: #ccc;
	z-index: 1000000;

	font-family: Arial, sans-serif;
	font-size: 11px;
	line-height: 16px;
}
	.x-editable-select-popup>a { display: block; margin: 3px 0 6px; color: #ccc; text-decoration: none; }
	.x-editable-select-popup>a:hover { color: #fff; text-decoration: underline; }
	.x-editable-select-item-selected { font-weight: bold !important; }


.x-editable-color {
}
	.x-editable-color-option {
		display: inline-block;
		width: 12px;
		height: 12px;
		margin-right: 3px;
		float: left;
	}
	.x-editable-color-option.x-editable-color-selected,
	.x-editable-color-custom.x-editable-color-selected {
		outline-color: #FFFFB7 !important;
		outline-style: solid !important;
		outline-width: 1px !important;
		outline-offset: 1px !important;
		/*-moz-outline-radius: 3px !important;
		-webkit-outline-radius: 3px !important;*/
	}
	.x-editable-color-custom.x-editable-color-selected { width: 20px; }
	.x-editable-color-custom {
		display: inline-block !important;
		width: 12px;
		height: 12px;
		float: left;
	}
		.x-editable-color-custom em {
			display: inline-block;
			width: 12px;
			height: 12px;
			float: left;
			background: url('/images/editable-color-custom.gif');
		}
		.x-editable-color-custom span { 
			display: none !important;
			width: 12px;
			height: 12px;
			float: left;
			display: none; 
		}
		.x-editable-color-custom.x-editable-color-selected em {
			width: 6px;
			margin-right: 2px;
		}
		.x-editable-color-custom.x-editable-color-selected span { display: inline-block !important; }

.x-editable-file:hover,
.x-editable-gallery:hover {
	background-image: none;
}
	.x-editable-file-drop {
		position: absolute;
		width: 150px;
		top: 0; left: 0;
		z-index: 800;
	}
	.x-editable-gallery .x-editable-file-drop { display: none; }
	.x-editable-gallery:hover .x-editable-file-drop,
	.x-editable-file-uploading .x-editable-file-drop,
	.x-editable-empty .x-editable-file-drop {
		display: block;
	}
	.x-editable-empty .x-editable-file-drop { position: relative; }
		.x-editable-file-caption, 
		.x-editable-file-progress {
			display: block;
			position: relative;
			min-width: 100px;
			max-width: 200px;
			/*width: 50%;;*/
			padding: 1px 5px;
			background: #09f;
			color: #fff;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			border-radius: 5px;
			text-align: center;

			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			-ms-box-sizing: border-box;
			box-sizing: border-box;

			font-family: Arial, sans-serif;
			font-size: 11px;
			line-height: 16px;
		}
		.x-editable-file-caption { cursor: pointer; }

		.x-editable-file-drop:hover .x-editable-file-caption { text-decoration: underline; }
		.x-editable-file-input {
			position: absolute;
			left: 0; top: 0;
			min-width: 100px;
			max-width: 200px;
			width: 50%;
			height: 23px;
			cursor: pointer;
			overflow: hidden;
		}
			.x-editable-file-input input {
				width: 100%;
				height: 23px;
				opacity: 0;
				-moz-opacity: 0;
				-webkit-opacity: 0;
				cursor: pointer;
			}
		
		.x-editable-file-progress {
			padding: 0;
			height: 23px;
			min-width: 110px;
			max-width: 210px;
		}

			.x-editable-file-progress div {
				position: relative;
				height: 23px;
				background-color: #666;
				-moz-border-radius: 5px;
				-webkit-border-radius: 5px;
				border-radius: 5px;	
			}		
			.x-editable-file-progress span {
				display: block;
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 13px;
				padding: 5px 0;
				text-align: center;
				color: #fff;
			}	



/* ----------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------- */
/* ---   GRID   ---------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------- */

.x-grid-container {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
}



/* ----------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------- */
/* ---   PANEL AND PANES   ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------- */

.x-panel {
	position: fixed;
	z-index: 99999;
	right: 100px;
	top: 100px;

	width: 290px;
	padding: 0px;

	background: #000;
	border: 1px solid #ccc;

	-webkit-box-shadow: 0 2px 8px #000;
	-moz-box-shadow: 0 2px 8px #000;
	-webkit-transform: none;
	-moz-transform: none;

	-webkit-transition-property: -webkit-box-shadow, opacity;
	-webkit-transition-duration: 0.5s;
	-webkit-transition-timing-function: ease-out;
}
.x-panel.ui-draggable-dragging {
	-webkit-box-shadow: 0 4px 16px #000;
	-moz-box-shadow: 0 4px 16px #000;
	/*-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);*/
	-webkit-transform: translate(0, -2px);
	-moz-transform: translate(0, -2px);
	-webkit-transition-property: -webkit-box-shadow, opacity;
	-webkit-transition-duration: 0.2s;
	-webkit-transition-timing-function: ease-out;

	/*opacity: 0.5;*/
}

	.x-panel * {
		font-family: Arial, sans-serif;
		font-size: 11px;
	}
	.x-panel .x-editable {
		color: #ffff99;
	}


	.x-panel-head {
		height: 10px;
		background: #09f;
	}

	.x-panes {
		width: 100%;
		height: auto;
	}
		.x-pane-title {
			position: relative;
			background-color: #000;
			border-top: 1px solid #999;
			border-bottom: 1px solid #000;
			text-transform: uppercase;
			cursor: default;
		}
			.x-pane-title h3 {
				padding: 4px 10px;
				font-family: Arial, sans-serif;
				font-size: 10px;
				font-weight: bold;
				color: #999;
                line-height: 16px;
            }
				.x-pane-title h3 span {
					font-weight: normal;
					font-style: italic;
				}
		.x-pane-title-active {
			background-color: #FFF;
			border-bottom-color: #ccc;
		}
			.x-pane-title-active h3 { color: #000; }
		.x-pane-title-disabled {}
			.x-pane-title-disabled h3 { color: #333; }
			
		.x-pane {
			position: relative;
			overflow: hidden;
			height: 0;
			background-color: #595959;
		}
		.x-pane-contextual { }
		.x-pane-active {
			overflow-y: auto;
			overflow-x: hidden;
			height: auto;
			/*min-height: 25px; /* height of .x-pane-loader */
		}
			.x-pane-loader {
				position: absolute;
				right: 0;
				top: 0;
				height: 25px;
				float: right;
			}
			.x-pane-inside {
				position: relative;
				min-height: 25px; /* height of .x-pane-loader */;
				color: #ccc;
				line-height: 17px;
				margin: 0;
			}
			.x-pane-contextual .x-pane-inside { height: 100%; }

			.x-pane-inside h4 { /* general panel heading */
				margin: 0 0 1px;
				padding: 1px 0 0;
				color: #fff;
                background-color: #474747;
				font-size: 11px;
				font-weight: normal;
				text-transform: uppercase;
                line-height: 16px;
				padding-left: 8px;
				cursor: default;
			}
			.x-pane-subheading + div {
				padding: 5px 0;
			}

			.x-pane-subheading-foldable:before { content: '- '; font: 10px monospace !important; }
			.x-pane-subheading-folded:before { content: '+ '; font: 10px monospace !important; }
			.x-pane-subheading-folded + div {
				display: none;
			}

			.x-pane-inside p { /* general panel paragraph */	
				margin: 0 8px;
				padding: 0;
			}
			.x-pane-inside a { /* general panel link */	
				color: #ccc;
				text-decoration: underline;
			}
			.x-pane-inside a:hover { color: #fff;}
			
			.x-pane-inside hr {
				height: 1px;
				border: none;
				border-top: 1px solid #333;
				margin: 7px 0 7px;
			}
	
	
	
	
/* ----------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------- */
/* ---   SECTIONS EDITOR   ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------- */
	
.x-se-container	{
	padding: 8px 8px 0;
}
	.x-se-section {
		clear: left;
	}
		.x-se-up, 
		.x-se-down { display: block; float: left; width: 10px; text-decoration: none !important; }
		.x-se-section:first-child .x-se-up { visibility: hidden; }
		.x-se-section:last-child .x-se-down { visibility: hidden; }
		.x-se-delete { 
			display: block; 
			float: right; 
			width: 10px; 
			margin-left: 7px;
			text-align: right; 
			text-decoration: none !important;
		}
		
		.x-se-title { display: block; float: left; max-width: 170px; }
		.x-se-published { display: block; float: right;  }
	
		.x-se-section .x-editable { color: #ffff99; }
		.x-se-section .x-editable:hover { color: #ffffff; }

.x-se-new-container	{
	padding: 0 8px 8px;
}

/* ----------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------- */
/* ---   SETTINGS   ------------------------------------------------------------------------------------------------------ */
/* ----------------------------------------------------------------------------------------------------------------------- */
	
.x-setting-group {
	border-bottom: 1px solid #333;
	padding: 3px 0 3px;
	margin: 0 0 1px;
}
	.x-setting-group h4 {
		margin-bottom: 1px;
	}
	
	.x-setting {
		display: block;
		padding: 0 8px;
	} 
		.x-setting-caption {
			display: block;
			float: left;
			text-align:left;
		}
		.x-setting-value {
			display: block;
			float: right;
			text-align: right;
			max-width: 100%;
		}
			.x-setting-value>span {
				display: inline;
			}
		.x-setting .x-editable {
			padding: 0 0 0 6px; /* Reserving space for :hover padding */
		}
		.x-setting .x-editable:hover {
			color: #191919;
			padding: 0 3px;	/* for simple editables create a bit of space */
		}
		
		.x-editable-color,
		.x-editable-empty,
		.x-editable-file { /* for some editables the padding is not necessary */
			padding: 0 !important;
		}
		.x-editable-color:hover,
		.x-editable-empty:hover,
		.x-editable-file:hover { /* for some editables the padding is not necessary */
			padding: 0 !important;
		}
	
	
		/* file upload in settings pane */
		
		.x-setting .x-editable-file-file {
			float: left;
			max-width: 164px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin-right: 10px;
			color: #ffff99 !important;
		}
		.x-setting .x-editable-file-drop {
			float: left;
			position: relative;
			width: 60px;
		}
		.x-setting .x-editable-file-caption {
			min-width: 60px;
			padding: 0 5px;
		}
		.x-setting .x-editable-file-progress {
			min-width: 60px;
			height: 15px;
			overflow : hidden;
		}
			.x-setting .x-editable-file-progress div { height: 15px; background-color: #191919; }
			.x-setting .x-editable-file-progress span { padding: 1px 0; }
		
		.x-setting .x-editable-file-input {
			min-width: 60px;
			height: 15px;
		}
		
		
	
	
	/* ---   GALLERY   --------------------------------------------------------------------------------------------------- */
	
	.x-gallery-setting {
		display: -moz-box;
		display: -webkit-box;
		display: -ms-box;
		display: box;

		-moz-box-orient: vertical;
		-webkit-box-orient: vertical;
		-ms-box-orient: vertical;
		box-orient: vertical;

		width: 100%;
		height: 100%;
	}

		.x-gallery-setting-toolbar {
			display: block;
			padding: 2px 4px;
			background-color: #474747;
		}
		.x-gallery-setting-uploading .x-gallery-setting-toolbar { display: none; }
			.x-gallery-setting-toolbar>* {
				display: block;
				float: left;
			}
			.x-gallery-setting-toolbar>span { margin-right: 2px; }
			.x-gallery-setting-toolbar .x-icon {
				background-color: #f00;
				margin-right: 2px;
			}
				.x-gallery-setting-toolbar .x-icon input {
					opacity: 0;
				}

		.x-gallery-setting-progress {
			display: none;
			height: 20px;
			background-color: #474747;
		}
		.x-gallery-setting-uploading .x-gallery-setting-progress { display: block; }
			.x-gallery-setting-progress div {
				position: absolute;
				left: 0;
				height: 20px;
				background-color: #0099FF;
			}
			.x-gallery-setting-progress span {
				display: block;
				position: absolute;
				width: 100%;
				padding: 2px;
				text-align: center;
				color: #fff;
			}


		.x-gallery-setting-list {
			-moz-box-flex: 1;
			-webkit-box-flex: 1;
			-ms-box-flex: 1;
			box-flex: 1;

			height: 10px;
			overflow: auto;
			padding: 8px 0;
		}
			.x-gallery-setting-image {
				position: relative;
				display: block;
				position: relative;
				padding-bottom: 4px;
				margin: 0 8px;
			}
				.x-gallery-setting-image div { float: left; }
				.x-gallery-setting-image .x-editable { max-width: 200px; min-width: 100px; }

				.x-gallery-setting-image-placeholder {
					margin-right: 8px;
					width: 60px;
					height: 60px;
					background-color: #CCCCCC;
				}
					.x-gallery-setting-image-placeholder img {
						max-width: 60px;
						max-height: 60px;
					}

				.x-gallery-setting-image-delete {
					position: absolute;
					left: 0;
					top: 0;
					z-index: 100;
				}

	
/* ----------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------- */
/* ---   DROPDOWN   ------------------------------------------------------------------------------------------------------ */
/* ----------------------------------------------------------------------------------------------------------------------- */
	
	
.x-control-dropdown {
	max-width: 100px;
	width: 16px;
	height: 0;
	padding: 16px 0 0;
	overflow: hidden;
	background: #191919 url('../images/dropdown-arrow-dn.png') no-repeat top right;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	color: #ccc;
	
}
.x-control-dropdown:hover {
	height: auto;
	width: auto;
	padding: 16px 8px 4px;
	z-index: 1000000;
}
	.x-control-dropdown p { margin: 3px 0 6px; }
	.x-control-dropdown a { color: #ccc; text-decoration: underline; }
	.x-control-dropdown a:hover { color: #fff; text-decoration: underline; }

.x-control-move {
	width: 16px;
	height: 0;
	padding: 16px 0 0;
	overflow: hidden;
	background: #191919;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	color: #ccc;
}



	
/* ----------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------- */
/* ---   ARTICLES   ------------------------------------------------------------------------------------------------------ */
/* ----------------------------------------------------------------------------------------------------------------------- */
	
.x-article {
	
}
	.x-article-controls {
		position: relative;
		width: 100%;
		min-width: 200px;
		height: 20px;
		padding: 2px;
		margin-bottom: 2px;
		/*background-color: #FFCCFF;
		-moz-border-radius: 8px;
		-webkit-border-radius: 8px;*/

		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}

		.x-article-controls, .x-article-controls * {
			font-family: Arial, sans-serif;
			font-size: 11px;
			line-height: 16px;
		}
	
		.x-article-tags {
			display: inline;
			font-style: italic;
		}
		.x-article-tags:not(.x-editable-empty) {
			margin-left: 2px;
			padding: 1px 2px;
			height: 14px;
		}
	
		.x-article-controls .x-control-dropdown {
			position: absolute;
			right: 2px;
			top: 2px;
			z-index: 1000;
			text-align: right;
		}
		.x-article:first-child .x-article-controls .x-article-up { display: none; }
		.x-article:last-child .x-article-controls .x-article-down { display: none; }
	
		.x-article-controls .x-control-move {
			position: relative;
			float: left;
			/*right: 22px;
			top: 2px;*/
		}

